import React from 'react';
import { Form, Select, Button } from 'antd';
import axios from 'axios';
import { DeleteOutlined } from '@ant-design/icons';
import Dialog from '../../components/Dialog';

const { Item } = Form;
const { Option } = Select;

class Selecter extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      options: [],
      defaultSelect: -1,
      currentSelect: -1
    };
  }

  componentDidMount() {
    const { selectChange } = this.props;
    
    axios.get('/aiOps/gateway/allDockate').then((res) => {
      const { data = [] } = res.data || {};
      this.setState({
        options: data,
        defaultSelect: data[0] ? data[0].id : '',
        currentSelect: data[0] ? data[0].id : ''
      }, () => {
        const { defaultSelect } = this.state;
        selectChange(defaultSelect);
      });
    });
  }

  selectChange = (key) => {
    const { selectChange } = this.props;
    this.setState({ currentSelect: key });
    selectChange(key);
  };

  deleteHost = () => {
    const { currentSelect } = this.state;
    axios.delete(`/aiOps/gateway/${currentSelect}`).then((res) => {
      Dialog({
        type: 'info',
        content: '节点删除成功！'
      });
    });
  };

  render() {
    const { options, defaultSelect, currentSelect } = this.state;
    return (
      <div className="selectHost">
        <Form
          layout="inline"
        >
          <Item label="请选择节点：">
            <Select
              size="middle"
              defaultValue={defaultSelect}
              style={{ width: 320 }}
              value={currentSelect}
              onChange={this.selectChange}
            >
              {
                options.map((item) => (
                  <Option key={item.id} value={item.id}>
                    {`${item.etcdPath}: ${item.executorHostIp}/${item.systemCpu}核/${item.systemMem}M内存`}
                  </Option>
                ))
              }
            </Select>
          </Item>
          <Item>
            <Button danger onClick={this.deleteHost}>删除所选节点</Button>
          </Item>
        </Form>
      </div>
    );
  }
}

export default Selecter;
